/* 本文件仅用于模板页面 */
const app = Vue.createApp({
    name: "templatePage",
    components: { templateComponent },
    props: {},
    setup(props, context) {
        const age = Vue.ref(16);
        const date = Vue.ref("");
        const templateComponentRef = Vue.ref(null)

        const childFun = () => {
            templateComponentRef.value.testFun()
        }

        const user = Vue.reactive({
            name: "tom",
            sex: true,
            age: 18
        })

        // === vue3 watch 写法 =========
        Vue.watch(age, (oldVal, newVal) => {
            console.log("age watch被触发：", oldVal, newVal);
        })
        Vue.watch(date, (oldVal, newVal) => {
            console.log("date watch被触发：", oldVal, newVal);
        })
        Vue.watch(user, (oldVal, newVal) => {
            console.log("user watch被触发：", oldVal, newVal);
        })

        // === vue3 computed 写法 =========
        const getUserAge = Vue.computed(() => {
            return user.name + "的年龄" + age.value
        })

        return {
            props,
            age,
            date,
            user,
            templateComponentRef,
            getUserAge,
            childFun
        }
    },
    template: `
        <div class="page">
            <div>我是页面</div>
            <a href="../index.html">返回首页</a>

            <hr>
            <p>element-plus日期使用例子：</p>
            <el-date-picker v-model="date" type="date"></el-date-picker>

            <hr>
            <p>vue3 watch ：</p>
            <button @click="age++">点击触发age watch,{{age}}</button>
            <button @click="user.age++">点击触发user watch,{{user.age}}</button>
            
            <hr>
            <p>vue3 computed ：</p>
            <p>{{getUserAge}}</p>
            
            <hr>
            <el-button @click="childFun">点击调用子级函数</el-button>
            <template-component ref="templateComponentRef"></template-component>
        </div>
    `
})
app.use(ElementPlus, {
    locale: dateLang.zhCn
})
app.mount('#app')